<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-24 17:43:41
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-25 11:57:00
-->
<template>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="A级" name="A级">
            <boxDivVue :permissionArray="permissionArray" />
        </el-tab-pane>
        <el-tab-pane label="B级" name="B级">
            <boxDivVue :permissionArray="permissionArray" />
        </el-tab-pane>
        <el-tab-pane label="C级" name="C级">
            <boxDivVue :permissionArray="permissionArray" />
        </el-tab-pane>
        <el-tab-pane label="D级" name="D级">
            <boxDivVue :permissionArray="permissionArray" />
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import boxDivVue from './boxDiv.vue'
import { userSystemPermissionSaveApi } from '@/services/system'
const activeName = ref('A级')
const permissionArray = ref<ISystemData.PermissionData>(null!)
onMounted(async () => {
    let retF = await userSystemPermissionSaveApi("A")
    permissionArray.value = retF.data
})


const handleClick = async (tab: TabsPaneContext, event: Event) => {
    let role = tab.props.label.slice(0, 1)
    switch (role) {
        case 'A':
            let retA = await userSystemPermissionSaveApi(role)
            console.log(retA.data)
            permissionArray.value = retA.data
            break;
        case 'B':
            let retB = await userSystemPermissionSaveApi(role)
            permissionArray.value = retB.data
            break;
        case 'C':
            let retC = await userSystemPermissionSaveApi(role)
            permissionArray.value = retC.data
            break;
        case 'D':
            let retD = await userSystemPermissionSaveApi(role)
            permissionArray.value = retD.data
            break;
        default:
            let retE = await userSystemPermissionSaveApi("A")
            permissionArray.value = retE.data
            break
    }
}
</script>

<style lang="scss" scoped>
.title {
    margin: 20px;
}
</style>